<template>
	<page  ref='page'>
		<!-- 装修金兑换商城 wwl -->
		<view class="page">
			<view class="select_box">
				<input type="text" v-model='title' confirm-typ="search" @confirm="page = 1;getCommodityList()" class="select_text2" :focus="isFocus" @focus='isFocus = true' @blur='isFocus = false'/>
				<view class="select_text1" v-if='!title && !isFocus' @click="isFocus = true">
					<image src="http://tuzhuang-1304727035.file.myqcloud.com/20211213/moIgND2cnkrxJ7nCJvljsDhjGXdLT9Pj77rnPBP9.png" mode="scaleToFill" ></image>
					<text>搜索</text>
				</view>
			</view>
			<scroll-view  style='height:100%' enableBackToTop="true" scroll-y="true" @scrolltolower="loadMore">
				<view class="">
					<view class="banner_box" v-if="bannerList && bannerList.length > 0">
						<swiper class="banner" @change='intervalChange' circular autoplay interval="2000" duration="1000" 
							indicator-active-color='#d5d5d5' indicator-color='#999'>
							<swiper-item v-for="(item,index) in bannerList" :key='index'  @click="$global.$swiperPage(item)">
								<view class="swiper_item">
									<image :src="item.pic_url" mode="scaleToFill" :data-index="index" class="image"></image>
								</view>
							</swiper-item>
						</swiper>
						<view class="swiper_option" >
							<text v-for="(items,indexs) in bannerList" :key="indexs"  :class="bannerActive == indexs ?  'active_icon' :''" class="icon">
							</text>
						</view>
					</view>
					<view class="banner_box2">
						<swiper @change='interval2Change' class="swiper"
							indicator-active-color='#d5d5d5' indicator-color='#999'>
							<swiper-item class="quick_box" v-for='(item,index) in quickList' :key='index' >
								<view class="row" v-for='(ic,ii) in item' :key='ii'   @click="onTypePage(ic)">
									<image :src="ic.picture" mode="scaleToFill"></image>
									<text>{{ic.name}}</text>
								</view>
							</swiper-item>
						</swiper>
						<view class="swiper_option2" >
							<text :class="quickActive ==  index ?  'active_icon' :''" v-for="(item,index) in quickList" :key='index' class="icon"></text>
						</view>
					</view>
					<!-- 兑换商城商品 -->
					<scroll-view  style='height:100%' enableBackToTop="true" scroll-y="true" @scrolltolower="loadMore">
						<view class="list_box">
							<block  v-if='total != 0'>
								<renovationShop v-for='(row,index) in list' :key='index' :row='row' status='shop' type='buildingMaterialsCity' :duihuan='duihuan' :offer='offer'/>
								<loadingText :type="loading || page * size < total" />
							</block>
							<view  style='padding-top:200rpx' v-else-if="!loading">
								<empty  :status='2' v-if='total == 0 && !loading '/>
							</view>
						</view>
						
					</scroll-view>
					<!-- 装修金商品 -->
					<!-- <block>
						<view class="list_box" v-if="total >  0">
							<renovation-row :list='commodityList' :page='page' :size='size' type='decorationMoneyExchange' :duihuan='duihuan' />
						</view>
						<empty status='2' v-if='total == 0 && !loading '/>
					</block> -->
				</view>
				<foot />
			</scroll-view>
		</view>
		
	</page>
</template>

<script>
	import { getDGTabList,getDGGoodsList,getShopList } from '../static/api.js'
	import  { getHomeCarousel } from "@/utils/getRequest.js"
	import renovationRow from '@/components/renovation-row.vue'
	import  renovationShop  from "@/components/renovation-shop.vue"
	export default {
		components: {
			renovationRow,
			renovationShop
		},
		data(){
			return{
				title:'',
				isFocus:false,
				bannerActive: 0,
				bannerList: [],
				quickList:[],
				quickActive:0,
				commodityList:[],
				page:1,
				size: 10,
				total:0,
				loading:false,
				list:[],
				offer:'',
				duihuan:1,//为1不让加入精算单
			}
		},
		onReachBottom(){
			if(this.page * this.size >= this.total || this.loading) return
			this.page ++
			this.getList()
		},
		methods: {
			loadMore(){
				if(this.page * this.size >= this.total || this.loading) return
				this.page ++
				this.getList()
			},
			onTypePage(row){
				uni.navigateTo({
					// 跳转商品分类
					//url:`/pagesCommodity/decorationMoneyExchange/classification?type=${row.id}&typeName=${encodeURIComponent(row.name)}`
					// 跳转店铺
					url:`/pagesCommodity/classification?type=${row.id}&typeName=${encodeURIComponent(row.name)}&isType=${false}&jiacan=6&duihuan=1`
				})
			},
			async getCommodityList(){
				if(this.page == 1)  uni.showLoading()
				this.loading = true
				try{
					var res = await getDGGoodsList({page:this.page,limit:this.size,nav_id:'',word:this.title,zone_id:this.$store.state.currentArea ? this.$store.state.currentArea.cityId : '',})
					this.commodityList  = this.page == 1 ?  res.list : [...this.commodityList,...res.list],
					this.total = res.count
					if(this.page == 1)  uni.hideLoading()
					this.loading = false
				}catch{
					uni.hideLoading()
					this.loading = false
				}
			},
			intervalChange(e) {
				this.bannerActive = e.detail.current
			},
			interval2Change(e) {
				this.quickActive = e.detail.current
			},
			async onGetBannerList() {
				try{
					var res = await getHomeCarousel({status:3,zone_id:this.$store.state.currentArea ? this.$store.state.currentArea.cityId : ''})
					this.bannerList = res
					this.getQuickList()
				}catch{}
			},
			async getQuickList(){
				try{
					var res = await getDGTabList()
					var  data = []
					res.forEach((x,i)=>{
						data.push(x)
						if((i+1)%4 == 0 ){
							this.quickList.push(data)
							data = []
						}
						if(i == res.length -1 && data.length > 0 ){
							this.quickList.push(data)
						}
					})
					// this.getCommodityList()
					this.getList()
				}catch{
				}
			},
			async getList(){
				this.loading = true;
				if(this.page == 1) uni.showLoading() 
				
				// if(this.jiacan){						
				// 		var res = await getShopList({
				// 			type:this.jiacan,
				// 			page:this.page,limit:this.size,
				// 			build_city_nav_id:this.type,
				// 			build_city_id:this.tabActive,
				// 			title:this.title,
				// 			zone_id:this.$store.state.currentArea ? this.$store.state.currentArea.cityId : '',
				// 			user_id: this.offer == 2  && this.$store.state.chat_to ? this.$store.state.chat_to.id : ''
				// 		})
				// }else{
						var res = await getShopList({
							type:6,
							page:this.page,limit:this.size,
							// build_city_nav_id:this.tabActive,
							// build_city_id:this.type,
							// title:this.title,
							zone_id:this.$store.state.currentArea ? this.$store.state.currentArea.cityId : '',
							user_id: this.offer == 2  && this.$store.state.chat_to ? this.$store.state.chat_to.id : ''
						})
				// }
				this.list =  this.page == '1' ? res.list : [...this.list,...res.list],
				console.log(this.list, '商品列表');
				this.total = res.count
				this.loading = false
				if(this.page == '1') uni.hideLoading() 
				
			},
		},
		onLoad(params){
			console.log(this.duihuan,'兑换1');
			this.onGetBannerList()
			// this.getList()
		}
	}
</script>

<style lang="scss" scoped>
	page{
		width: 100%;
		min-height: 100%;
		display: flex;
		background-color:#fff;
	}
	.page {
		background-color: #fff;
	    flex: 1;
		display: flex;
	    flex-direction: column;
	    overflow: hidden;
		height: 100vh;
	  }
	  .list_box{
	  		  padding:  0 36rpx;
	  		  width: 100% ;
	  		  box-sizing: border-box;
	  		  min-height: 60vh;
	  }
	// .page{
	// 	padding: 20rpx 0;
	// 	width: 100%;
	// 	box-sizing: border-box;
	// }
	.select_box{
		position: relative;
		padding: 20rpx 36rpx;
		width: 100%;
		box-sizing: border-box;
		.select_text2{
			width: 100%;
			height: 66rpx;
			background: #f8faff;
			border-radius: 34rpx;
			font-size: 28rpx;
			line-height: 40rpx;
			color:#333;
			text-align: center;
			padding: 0 26rpx ;
			box-sizing: border-box;
		}
		.select_text1{
			font-size: 28rpx;
			line-height: 40rpx;
			color:#ADADAD;
			position: absolute;
			left: 50%;
			top:50%;
			transform: translate(-50%,-50%);
			display: flex;
			justify-content: center;
			align-items: center;
			image{
				width: 40rpx;
				height: 40rpx;
			}
			
		}
	}
	.banner_box {
		margin-top: 14rpx;
		position: relative;
		.swiper_option{
			position: absolute;
			bottom: 0;
			left: 0;
			width: 750rpx;
			height: 40rpx;
			z-index: 999;
			display: flex;
			justify-content: center;
			align-items: center;
			.icon{
				display: inline-block;
				width: 16rpx;
				height: 16rpx;
				background-color: #D5D5D5;
				border-radius: 50%;
				margin-right: 16rpx;
				&:last-child{
					margin-right: 0;
				}
			}
			.active_icon{
				background: #26252a;
				transition: 0.5s all ;
			}
		}
		.banner {
			width: 100%;
			height: 176rpx;
			.swiper_item {
				position: relative;
				height: 176rpx;
				border-radius: 30rpx;
				width: 100%;
				padding: 0 36rpx;
				box-sizing: border-box;
				.image {
					width: 100%;
					height: 176rpx;
					border-radius: 30rpx;
				}
			}
		}
	}
	.banner_box2 {
		margin-top: 18rpx;
		position: relative;
		.swiper{
			height: 212rpx;
		}
		.quick_box{
			display: flex;
			padding: 40rpx 36rpx;
			box-sizing: border-box;
			width: 100%;
			// justify-content: space-between;
			// flex-wrap: wrap;
			.row{
				// flex:25%;
				width:178.5rpx;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				image{
					width: 72rpx;
					height: 72rpx;
					margin-bottom: 20rpx;
				}
				text{
					display: inline-block;
					color:#101010;
					text-align: center;
					line-height: 40rpx;
					font-size: 28rpx;
					padding:0 10rpx;
					width: 100%;
					box-sizing: border-box;
					white-space:nowrap;
					overflow:hidden;
					text-overflow:ellipsis;
					word-break: break-all;
				}
			}
		}
		.swiper_option2{
			display: flex;
			justify-content: center;
			align-items: center;
			.icon{
				display: inline-block;
				width: 12rpx;
				height: 12rpx;
				background: #ebebeb;
				border-radius: 12rpx;
				margin-right: 12rpx;
				&:last-child{
					margin-right: 0;
				}
			}
			.active_icon{
				width: 30rpx;
				background-color: $theme;
				transition: 0.5s all ;
			}
		}
	}

</style>
